<template>
	<view class="collection-page init-page" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
		<!-- #ifndef MP-WEIXIN -->
		<myuni-topbar>
		  <template v-slot:title>
			<text>我的收藏</text>
		  </template>
		</myuni-topbar>
		<!-- #endif -->
		<view class="main">
			<myuni-tab ref="scroll_tab" class="tab-title" :title="titleData" @tabChange="tabChanged">
				<view class="info-content">
					<view v-if="currentTabIndex===0" class="album-container">
						<view  v-if="!albumList.length"  class="null">
							<view class="tips">
								暂无收藏专辑
							</view>
						</view>
					</view>
					<view v-else-if="currentTabIndex===1" class="mv-container">
						<navigator class="scroll-item" :url="'/pages/playmv/playmv?id='+item.vid+'&type=0'" v-for="(item,index) in mvList" :key="item.vid">
							<view class="cover">
								<image :src="item.coverUrl" :lazy-load="true" mode="widthFix"></image>
								<view class="normal-tag" v-if="item.playCount">
									<i class="iconfont icon-24gl-play"></i><text>{{(item.playCount/10000).toFixed(1)}}万</text>
								</view>
							</view>
							<view class="item-name">{{item.title}}</view>
						</navigator>
						<view class="scroll-item"></view>
						<view class="scroll-item"></view>
					</view>
					<view v-else="currentTabIndex===2" class="singer-container">
						<view class="singer-list">
							<navigator  :url="`/pages/singer/singer?singerId=${item.id}`" class="singer-list-item" v-for="item in singerList" :key="item.id">
								<image :src="item.picUrl" :lazy-load="true" mode="widthFix"></image>
								<view class="right-info">
									<text class="name ft">{{item.name}}</text>
								</view>
							</navigator>
						</view>
					</view>
				</view>
			</myuni-tab>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default{
		data(){
			return{
				currentTabIndex:0,
				titleData:['专辑','MV','歌手'],
				albumList:[],
				mvList:null,
				singerList:null,
			}
		},
		onLoad() {
			this.getCollectionAlbum()
			this.getCollectionMv()
			this.getCollectionSinger()
		},
		computed:{
			...mapState(['themeType','cookie'])
		},
		methods:{
			getCollectionAlbum(){
				this.request({
					url:"/album/sublist?cookie="+this.cookie
				}).then(res=>{
                    this.albumList=res.data
					console.log(res)
				})
			},
			getCollectionMv(){
				this.request({
					url:"/mv/sublist?cookie="+this.cookie
				}).then(res=>{
					this.mvList=res.data
				})
			},
			getCollectionSinger(){
				this.request({
					url:"/artist/sublist?cookie="+this.cookie
				}).then(res=>{
					console.log(res)
					this.singerList=res.data
				})
			},
			tabChanged(val){
				this.currentTabIndex=val.index
				// if(!this.songs&&val.index===1){
				// 	this.getSongs(this.singerId)
				// }
				// else if(!this.albums&&val.index===2){
				// 	this.getAlbum(this.singerId)
				// }
			},
		}
	}
</script>
<style lang="scss" scoped>
.collection-page{
	padding-bottom: 0px !important;
	// background-color: #111115 !important;
	.main{
		// background-color: #111115;
		.info-content{
			.album-container{
				.null{
					padding: 10rpx;
					// background-color: #18191a;
					border-radius: 20rpx;
					.tips{
						text-align: right;
					}
				}
			}
			.mv-container{
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				.scroll-item{
				  padding: 20rpx 20rpx;
				  display: flex;
				  flex-direction: column;
				  align-items: center;
				  justify-content: center;
				  flex-shrink: 0;
				  width: 180rpx;
				  .cover{
					  position: relative;
					  width: 100%;
					  max-height: 188rpx;
					  color: #fff;
					  image{
					  	width: 100%;
					  	border-radius: 10rpx;
					  }
					  .swiper-tag{
						 position: absolute;
						 right: 6rpx;
						 top: 6rpx;
						 height: 12px;
						 line-height: 12px;
						 font-weight: 700;
					  }
					  .normal-tag{
						  padding: 0 10rpx;
						  display: flex;
						  position: absolute;
						  right: 6rpx;
						  top: 6rpx;
						  height: 12px;
						  line-height: 12px;
						  background-color: #ccc;
						  opacity: .5;
						  border-radius: 16rpx;
						  text,i{
							 font-size: 12px;
						  }
					  }
				  }
				  .item-name{
				  	width: 100%;
				  	height: 30px;
					text-align: center;
				  	display: -webkit-box;
				  	overflow: hidden; 
				  	-webkit-box-orient: vertical;
				  	-webkit-line-clamp: 2;
				  	font-size: 24rpx;
				  	color: #535355;
				  	white-space: pre-wrap;
				  }
				}
			}
			.singer-container{
				.singer-list{
					.singer-list-item{
						margin: 20rpx 0;
						display: flex;
						border-radius: 20rpx;
						overflow: hidden;
						image{
							width: 200rpx;
							height: 200rpx;
						}
						.right-info{
							padding: 0 50rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							.name{
								font-size: 32rpx;
							}
						}
					} 
				}
			}
		}
	}
}
</style>
